<template>
<div>
  <div style="height: calc(100vh - 100px);overflow-y: auto">
  <van-nav-bar   left-text="购物车" :fixed="true" :placeholder="true">
    <template #title>
      <div style="display: flex;align-items: center">
        <div><van-search  shape="round" background="white" placeholder="请输入搜索关键词"/></div>
      </div>
    </template>
  </van-nav-bar>
  <van-checkbox-group v-model="radio" >
    <van-checkbox :name="items.cartId" checked-color="#ee0a24" style="margin-bottom: 10px" v-for="items in carts" :key="items.id">
      <template #default>
        <van-card style="width: calc(100vw - 30px)"  :thumb="items.itemImages.includes(';')?items.itemImages.split(';')[0]:items.itemImages">
          <template #title>
            <div class="two-lines" style="font-size: 16px">
              {{items.itemTitle}}
            </div>
          </template>
          <template #price>
            <div style="font-size: 16px;font-weight: bold"><span style="font-size: 12px">￥</span>{{items.price}}</div>
          </template>
          <template #num>
           <div @click.stop=""><van-stepper v-model="items.num" disable-input @change="changeNum(items)"/></div>
          </template>
          <template #desc>
            <div class="one-lines" style="font-size: 15px;background-color: #eeeeee;border-radius: 10px;margin-top: 10px;padding: 2px;color: #8c939d " @click.stop="chooseSpe(items)">
              <span style="color: #999">规格：</span>{{items.specification}}
            </div>
          </template>
        </van-card>
      </template>
    </van-checkbox>
  </van-checkbox-group>
<!--  规格-->
  <van-sku v-model="show" :sku="sku" :initial-sku="initialSku" :goods="goods" :hide-stock="sku.hide_stock"   @buy-clicked="onBuyClicked">
    <!-- 自定义 sku actions -->
    <template #sku-actions="props">
      <div class="van-sku-actions">
        <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
        <van-button square size="large" type="danger" @click="props.skuEventBus.$emit('sku:buy')">确定</van-button>
      </div>
    </template>
  </van-sku>
  </div>
<!--  结算-->
  <div style="height: 50px">
    <van-submit-bar :price="price" button-text="去结算" @submit="calcAll" :disabled="radio.length==0">
      <van-checkbox v-model="checked" @click="selectAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</div>
</template>
<script>
import Vue from 'vue';
import {NavBar, Toast} from 'vant';
import { Search } from 'vant';
import { Card } from 'vant';
import { Checkbox, CheckboxGroup } from 'vant';
import { Sku } from 'vant';
import request from "../../utils/request";
import { SubmitBar } from 'vant';
import { Stepper } from 'vant';

Vue.use(Stepper);
Vue.use(SubmitBar);
Vue.use(Sku);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Card);
Vue.use(Search);
Vue.use(NavBar);
export default {
  data(){
    return{
      price:0,
      initialSku:{},
      carts:[],
      checked:false,
      goods: {
        // 默认商品 sku 缩略图
        picture: 'https://m.360buyimg.com/mobilecms/s1265x1265_jfs/t1/169355/21/30709/13723/6395a338Eabdb7f34/16c8d57923ab7ef0.jpg!q70.dpg.webp'
      },
      sku: {},
      show:false,
      radio: [],
      specification:{},
    }
  },
  watch:{
    radio(newValue,oldValue){
      this.calcPrice()
      if (newValue.length==this.carts.length){
        this.checked=true
      }else {
        this.checked=false
      }
    }
  },
  created() {
    this.getData()
  },
  methods:{
    // 去結算
    calcAll(){
      let product
      for (let i = 0; i <this.carts.length; i++) {
        if (this.radio[0]==this.carts[i].cartId){
          product=this.carts[i]
          break
        }
      }
      request.post('/order/takeOrders',product).then(resp=>{
          if (resp.code===0){
            this.$router.push({path:'/appOrder',query:{orderId:resp.data,i:product.productId,itemId:product.itemId,price:product.price}})
          }else {
            Toast(resp.errorMessage)
          }
      })
      // this.$router.push({path:'/appOrderMore',query:{cartId:cartIds}})
    },
    calcPrice(){
      this.price=0
      for (let i = 0; i < this.carts.length; i++) {
        if (this.radio.includes((this.carts[i].cartId))){
          this.price+=this.carts[i].num*this.carts[i].price*100
        }
      }
    },
    getData(){
      request.get('/cart/getData').then(resp=>{
        if(resp.code===0){
          this.carts=resp.data
        }
      })
    },
    changeNum(value){
      request.post('/cart/addOrUpdateData',{cartId:value.cartId,num:value.num,specificationId:value.specificationId}).then(resp=>{
        if (resp.code===0){
          if (this.radio.includes(value.cartId)){
            this.calcPrice()
          }
        }else {
          Toast(resp.errorMessage)
        }
        this.getData()
      })

    },
    chooseSpe(i){
      this.specification=i
      request.post('/cart/getSpecification',{productId:i.productId,specification:i.specification,stock:i.num}).then(resp=>{
        if (resp.code===200){
          this.sku=resp.data
          this.initialSku=resp.msg
          this.goods.picture=i.itemImages.includes(';')?i.itemImages.split(';')[0]:i.itemImages
          this.show=true
        }
      })
    },
    onBuyClicked(skuData){
      console.log(skuData)
      request.post('/cart/updateSpec',{cartId:this.specification.cartId,num:skuData.selectedNum,id:skuData.selectedSkuComb.id,productId:this.specification.productId}).then(resp=>{
        if (resp.code===0){
          this.getData()
          this.show=false
          Toast("修改成功")
        }
      })

    },
    selectAll(){
      if (this.checked==true){
        this.radio = []
        for (let i = 0; i < this.carts.length; i++) {
          this.radio.push(this.carts[i].cartId)
        }
      }else {
        this.radio = []
      }

    }
  }
}
</script>
<style scoped>
>>> .van-nav-bar__text{
  color: black;
}
>>> .van-checkbox{
  background-color: #fafafa;
}
>>> .van-checkbox__icon{
  margin-left: 10px;
}
>>> .van-card{
  padding-left: 0;
}
.two-lines {
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.one-lines {
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
>>> .van-submit-bar{
  padding-bottom: 50px;
  border-top: 1px #f1f1f1 solid;
}
>>> .van-checkbox__icon--checked .van-icon{
  color: white;
  background-color: red;
  border-color: red;
}
</style>
